<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Box Sizing Example</title>
    
    <style>
        /* 清除浮动的几种方式 */
        /* <br clear=all>
        
        父级元素 加 zoom:1 
        overflow:hidden 或者 :after{content:'',display:block,clear:both} */
        
        /* 设置全局 box-sizing */
        /* * {
            box-sizing: border-box;
        } */
        /* 示例元素 */
        .element {
            width: 250px;
            margin: 0 auto;
            /* height: 100px; */
            /* padding: 10px;
            border: 5px solid blue; */
            background-color: lightblue;
            /* float: left; */
            zoom:1;
            overflow: hidden;
        }
        .div1{
            width: 200px;
            height: 100px;
            /* margin: 0 auto; */
            background-color: blue;
            white-space: nowrap;
            float: left;
            
        }
        /* .div1:after{
            content: '';
            display: block;
            clear:both;
        } */
        /* .div2{
            width: 200px;
            height: 50px;
            background-color: red;
            float: left;
        } */
    </style>
</head>
<body>
    <div class="element">
      <div class="div1"> 111111111111    </div>
      <!-- <div class="div2"></div> -->
      <!-- <br clear="all"> -->
                  
    </div>
    <!-- <div>
       
    </div> -->
    <span class="span1"></span>
    <script>
        let span1 = document.querySelector(".span1");
        span1.innerText = ["1sdf","ss","sff"].join(',   ')
    </script>
</body>
</html>